    {{ extend './layout/main.html'}}   
    {{block 'title'}}注册{{/block}} 
    {{block 'headercss'}}
    <link href="/public/css/register.css" rel="stylesheet" type="text/css" />
    {{/block}}
    {{block 'content'}}   
    <div class="aw-register-box">
        <div class="mod-head">
            <a href="/"></a>
            <h1>注册新用户</h1>
        </div>
        <div class="mod-body">
            <form action="" class="aw-register-form" method="post" id="register_form">
                <ul>
                    <li class="alert alert-danger hide error_message text-left">
                        <i class="icon icon-delete"></i> <em></em>
                    </li>
                    <li>
                        <input v-model="username" class="aw-register-name form-control" type="text" name="username" placeholder="用户名" value="" />
                        <span v-text="userCheck"></span>
                    </li>
                    <li>
                        <input v-model="email" class="aw-register-email form-control" type="text" placeholder="邮箱" name="email" value="" />
                    </li>
                    <li>
                        <input v-model="telephone" class="aw-register-email form-control" type="text" placeholder="手机号" name="email" value="" />
                    </li>
                    <li>
                        <input v-model="password" class="aw-register-pwd form-control" type="password" name="password" placeholder="密码"  />
                    </li>
                    <div id='pwd-level' style="overflow: hidden">
                        <span>密码强度:</span>
                        <div style="display: none" id="qqto">
                            <div v-for="(value) in num"></div>
                        </div>
                    </div>
                    <hr/>
                    <li class="aw-register-verify">
                        <img class="pull-right" width="85" src="/api/getPic" onclick="this.src='/api/getPic?'+Date.now()">
                        <input v-model= "v_code" type="text" class="form-control" name="vcode" placeholder="验证码" />
                    </li>
                    <li class="last">
                        <label>
                            <input type="checkbox" checked="checked" v-model="age"/> 我同意</label> <a href="javascript:;" class="aw-agreement-btn">用户协议</a>
                        <a href="/user/login" class="pull-right">已有账号?</a>
                        <div class="aw-regiter-agreement hide">
                            <div class="aw-register-agreement-txt" id="register_agreement"></div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <button type="button" class="btn btn-large btn-blue btn-block" v-on:click.stop.prevent="reginBtn">
                            注册
                        </button>
                    </li>
                </ul>
            </form>
        </div>
    </div>
    {{/block}}
    {{block 'vue'}}
    <script>
   let app = new Vue({
        el:"#app",
        data:{
            username:"",
            userCheck:"",
            email:"",
            password:"",
            telephone:"",
            v_code:"",
            age:true,
            num:0,
            old:"",
        },
        methods: {
            reginBtn(){
                let _this = this;
                if(!this.age){
                    window.alert("请勾选协议")
                    return;
                }
                // let code = this.v_code;
                let patter = /[0-9]{4}/;
                if(!patter.test(+this.v_code)){
                    window.alert("验证码不正确");
                    return;
                }
                if((this.email<3) || (this.password<4) || (this.telephone<4) ){
                    window.alert("输入信息不符合要求");
                    return;
                }
                axios.post('/user/registerUser', {
                    username:this.username,
                    email:this.email,
                    telephone:this.telephone,
                    password:md5(this.password),
                    v_code:this.v_code
                })
                .then(function (response) {
                    let {data,erron,msg} = (response.data);
                    if(!erron){
                        window.alert("跳转到登录页面");
                        window.location.href = "/user/login";
                        // axios.post('/user/registerlogin', {
                        //     username: _this.username,
                        // })
                        // .then(function (response1) {
                        //     console.log(response1.data);
                        // })
                        // .catch(function (error1) {
                        //     console.log(error1);
                        // });


                    }
                    else{
                        window.alert(msg);
                        $(".pull-right").attr("src","/api/getPic?"+Date.now());

                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
                
            }
        },
        computed: {
           
        },
        watch: {
            username:_.debounce(
               function (n,o) {
                if(n==""){
                    app.userCheck ="";
                    return;
                }
                axios.post('/user/check-username', {
                    username: n
                })
                .then(function (response) {
                    let {erron} = (response.data);
                    if(app.username==""){

                    }
                    if(!erron){
                        app.userCheck = "此用户名可以使用";
                    }else{
                        app.userCheck ="此用户名已经使用过了,请更换";
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
               },1500 
            ),
            'password':function (n,o) {
                this.num = 0;
                let pattern = /^[a-z]/i;
                let pattern1 = /^[a-z].{8,16}/;
                let pattern2 = /\d$/;
                let pattern3 = /[0-9]+/;
                if( pattern.test(n) == false){
                    return;   
                }
                this.num++
                pattern1.test(n) && this.num++;
                pattern2.test(n) && this.num++;
                pattern3.test(n) && this.num++;
            }
        },
        mounted() {
            this.$nextTick( ()=> {
                $("#qqto").css("display","block");                

            })
        },
        created() {
            this.num = 0;
        },

    })
    </script>
    {{/block}} 
